<template>
  <div>
    <!-- 网友推荐歌单 -->
    <div class="choice">
      <h3>
        网友推荐歌单
        <span class="more" @click="tolist">查看更多</span>
      </h3>
      <nut-scroller>
        <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData1" :key="index">
          <dl class="nut-scroller-item-info">
            <dt>
              <img :src="item.coverImgUrl" alt />
            </dt>
            <dd class="txt">{{item.name}}</dd>
          </dl>
        </div>
      </nut-scroller>
    </div>
    <!-- 新歌排行榜 -->
    <div class="list" v-for="item in this.songlists" :key="item.id" @click="openlist(item)">
      <div class="listimg">
        <img :src="item.coverImgUrl" alt />
      </div>
      <div class="listcontent">
        <p
          v-for="(items,index) in item.tracks"
          :key="items.id"
        >{{index+1}} {{items.name}} - {{items.ar[0].name}}</p>
      </div>
    </div>
    <!-- 功能组件 -->
    <!--  底部tabbar -->
    <tabbar></tabbar>
    <!-- 新歌排行榜 -->
    <newsong :shownew="shownew" :songsdetail="songsdetail" tname="shownew" :closelist="closelist"></newsong>
  </div>
</template>
<script>
import tabbar from "../tabbar/tabbar";
import newsong from "./newsong";
import { url, topplaylist, toplist } from "../../api/api";
export default {
  data() {
    return {
      listData1: [], //  网友精选歌单
      songlists: [], //  排行榜歌曲详情（全）
      num: 3, //  排行榜预览显示的歌曲数量
      shownew: false, //  新歌排行榜
      songsdetail: "" //  打开的歌单
    };
  },
  components: {
    tabbar,
    newsong
  },
  mounted() {
    this.gettopplaylist();
    this.getcurtoplist();
  },
  methods: {
    //  打开排行榜歌单的回调函数
    openlist(item) {
      this.songsdetail = item;
      this.shownew = true;
    },
    //  关闭回调函数
    closelist(tname) {
      this[tname] = false;
    },
    /* 跳转更多歌单 */
    tolist() {
      this.$router.push({ name: "lists" });
    },
    /* 获取当前页面地排行榜 */
    getcurtoplist() {
      for (let i = 0; i < 3; i++) {
        this.gettoplist(i);
      }
      //  新歌榜单
      //  热歌榜单
      //  原创榜单
    },
    /* 所有排行榜 */
    gettoplist(id) {
      this.$axios
        .get(`${url}${toplist}`, {
          params: {
            idx: id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
              let temp = data.data.playlist;
              this.songlists.push(temp);
              //console.log(this.songlists)
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    },
    /* 网友精选歌单 */
    gettopplaylist() {
      this.$axios
        .get(
          `${url}${topplaylist}`,
          {
            params: {
              order: "new"
            }
          },
          { withCredentials: true }
        )
        .then(
          data => {
            if (data.data.code == 200) {
              this.listDatas = data.data.playlists;
              if (data.data.playlists.length > 10) {
                data.data.playlists.length = 10;
              }
              this.listData1 = data.data.playlists;
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    }
  }
};
</script>
<style scoped>
/* 网友精选歌单 */
.choice,
.list {
  padding: 10px;
}
h3 .more {
  float: right;
  border: 1px solid #ccc;
  font-size: 12px;
  border-radius: 20px;
  padding: 5px;
}
.nut-scroller {
  width: 355px;
}

.nut-scroller-item-info {
  width: 100px;
  height: 100px;
  margin: 10px 0 10px 0;
}

.nut-scroller-item-info img {
  width: 80px;
  height: 80px;
  border-radius: 15px;
}
.nut-scroller-item-info .txt {
  text-align: center;
  width: 80px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
/* 排行榜 */
.nut-cell-box {
  height: 40px;
}
p.more {
  text-align: center;
  font-size: 14px;
  line-height: 24px;
}
.list {
  display: flex;
  overflow: hidden;
}
.list .listimg {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
.list .listimg img {
  width: 120px;
  height: 120px;
}
.list .listcontent {
  width: 100%;
  height: 120px;
  overflow: hidden;
}
.list .listcontent p {
  font-size: 14px;
  line-height: 30px;
}
</style>